<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>web-api</title>
    <style type="text/css">
    ul {
        overflow: hidden;
    }

    ul>li {
        width: 100px;
        line-height: 40px;
        text-align: center;
        float: left;
        margin: 10px;
        border: 1px solid red;
        border-radius: 5px;
        list-style: none;
    }
    </style>
</head>

<body>
    <ul class="iiiiiccc" id="ul" iii='iiuse'>
        <li id="li1">111</li>
        <li id="li2">222</li>
        <li id="li3">333</li>
        <a id="a" href="http://www.baidu.com" target="_blank">baidu</a>
    </ul>
    <script type="text/javascript">
    // W3C api 		全局变量
    // ECMA 		标准
    // document--
    console.log(navigator.userAgent)
    //浏览器中js js+web-api
    // dom==tree
    // 常用api
    // attr 和 property 区别

    //html 结构化的浏览器识别，js操作的模型

    // 元素节点的attribute
    // property...
    // el.className 
    var ul = document.getElementById('ul');
    console.log(ul.className);
    console.log(ul.getAttribute('iii'));
    console.log(ul.setAttribute('iii', 'fsfsfsfsa'));
    console.log(ul.getAttribute('iii'));

    //新增节点 获取父 获取子 删除节点
    //appendChild 移动节点。。。removeChild
    console.log(ul.childNodes);
    var lil = document.createElement('li');
    lil.innerHTML = '121212';
    ul.appendChild(lil);
    // document.onclick = function() {
    // ul.removeChild(lil)
    // /    <!-- } -->
    //
    //浏览器类型
    //拆解 url 各部分
    //navigator screen location history 
    console.info(screen.width)
    console.info(screen.height)

    console.log(location.href);
    console.log(location.protocol);
    console.log(location.host);
    console.log(location.pathname);
    console.log(location.search);
    console.log(location.hash);

    history.back();
    history.forward();

    // 通用的事件监听事件函数
    // 
    // 移动端的天下---
    // 
    // 代理
    // 
    console.log(ul);
    var a = document.getElementById('a');
    a.addEventListener('click', function(e) {
        e.preventDefault();
    })
    // ul.addEventListener('click', function(e) {
    //     // window.alert('fsfsf');
    //     // console.log(this);
    //     // console.log(e.nodeName);
    //     var target = e.target
    //     console.log(e);
    //     // window.alert(target.innerHTML)
    //     console.info(target);
    //     console.info(target.innerHTML);
    //     if (target.nodeName === "") {
    //         window.alert(e.innnerHTML)
    //     }
    // })
    // 代理代理。。。

    function bindE(el, type,sel, fn) {
    	if(fn==null){
    		fn=sel
    		sel=null
    	}
        el.addEventListener(type, fn)
    }
    bindE(ul, 'click', (e) => {
    	 // alert(1213);
    	 console.log(e)
    	 console.log(e.target.matches('LI'))
    	 console.log(e.target.matches('#li2'))
    	 if(e.target.nodeName==='LI'){
    	 	console.log(e.target.innerHTML)
    	 }
        // e.stopPropagation();
         })

    var xhr=new XMLHttpRequest();
    xhr.open('GET',test.json,false);
    xhr.onreadyStatechange=function(){
	    /////////////////////////
    	//readyStatus --状态码--  //
	    /////////////////////////
    	//0-未初始（没有调用send）
    	//1-载入 （send 正在发送）
    	//2-载入完成 接收到响应内容
    	//3-交互 解析响应内容
    	//4-完成 解析完成 可以客户端调用
	    ///////////////////////////
    	//   -- status http标准码-- //
	    ///////////////////////////
    	// 2xx 成功处理请求
    	// 3xx 重定向 
    	// 4xx 客户端错误 地址找不到之类。
    	// 5xx 服务端错误 
    	// 
    	if(xhr.readyState==4){
    		if(xhr.status==200){
    			alert(xhr.responseText)
    		}
    	}
    }
    xhr.send(null);
    // 
    // 协议 域名 端口 80 43
    // 三个标签 img link script
    // img 打点统计
    // link script cdn
    // script 用于JSONP
    // 跨域请求要经过信息提供方的允许--
    // script src 处理返回
    // 服务端设置http header
    // 
    // cookie 通信标识 本地存储能力被借用  同域名每次携带
    // sessionStorage localStorage 存储周期不同
    // ios safari隐藏模式下 localStorage.getItem 会报错 try catch
    // 

    </script>
</body>

</html>